<!-- 
svg-icon组件
index.html 引入iconfont网站 symbol图标js地址
@params

iconName -> 图标名字【不包含 "#icon-"】
w        -> 图标宽 【默认1rem】
h        -> 图标高 【默认1rem】
color    -> 颜色
margin   -> 边距 【默认0】
padding  -> 填充 【默认0】
-->
<template>
  <svg
    class="svg-icon"
    aria-hidden="true"
    :style="{
      width: w,
      height: h,
      fill: color,
      margin: margin,
      padding: padding
    }"
    @click="iconClick"
  >
    <use :xlink:href="icon"></use>
  </svg>
</template>

<script>
export default {
  name: "svg-icon",
  props: {
    iconName: {
      type: String,
      required: true
    },
    w: {
      type: String,
      default: "1rem"
    },
    h: {
      type: String,
      default: "1rem"
    },
    color: {
      type: String,
      default: ""
    },
    margin: {
      type: String,
      default: "0"
    },
    padding: {
      type: String,
      default: "0"
    }
  },
  computed: {
    icon() {
      return `#icon-${this.iconName}`;
    }
  },
  methods: {
    iconClick() {
      this.$emit("iconClick");
    }
  }
};
</script>

<style scoped>
.svg-icon {
  /* vertical-align: -0.15em; */
  overflow: hidden;
}
</style>
